﻿<%@ Page Title="" Language="C#" AutoEventWireup="true" CodeBehind="PrintCompareApplicants.aspx.cs" Inherits="BladeTecWebApplication.Admin.PrintCompareApplicants" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <link rel="Stylesheet" href="../css/netsys-quiz.css" type="text/css" />
	<link type="text/css" href="../jquery-ui-1.8.18.custom/css/custom-theme/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
	<script type="text/javascript" src="../jquery-ui-1.8.18.custom/js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="../jquery-ui-1.8.18.custom/js/jquery-ui-1.8.18.custom.min.js"></script>

<link class="include" rel="stylesheet" type="text/css" href="jqplot/jquery.jqplot.min.css" />
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="jqplot/excanvas.js"></script><![endif]-->

<script class="include" type="text/javascript" src="jqplot/jquery.jqplot.min.js"></script>
<script class="include" type="text/javascript" src="jqplot/plugins/jqplot.barRenderer.min.js"></script>
<script class="include" type="text/javascript" src="jqplot/plugins/jqplot.pieRenderer.min.js"></script>
<script class="include" type="text/javascript" src="jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script class="include" type="text/javascript" src="jqplot/plugins/jqplot.pointLabels.min.js"></script>

<script class="code" type="text/javascript">

	function drawLevelsGraph() {
		var levelSeries = [];
		var names = [];

		var levels = $("#hfLevels").val().substring(0, $("#hfLevels").val().length - 1).split('|');
		
		var hiddenFields = $("input[type='hidden']");
		for (var i = 0; i < hiddenFields.length; i++) {
			if ($(hiddenFields[i]).attr('id').indexOf("attemptLevelInfo") > -1) {
				var data = $(hiddenFields[i]).val();
				names.push(data.substring(0, data.indexOf('|')));
				var ls = data.substring(data.indexOf('|') + 1, data.length - 1);
				levelSeries.push(ls.split(','));
			}
		}

		var levelSeriesArray = [];
		for (var i = 0; i < levelSeries.length; i++) {
			var color = (i % 2 == 0) ? "#CCC" : "#DC291E";
			try {
				levelSeriesArray.push({
					color: color,
					shadow: false,
					label: names[i]
				});
			} catch (e) { }
		}

		var quizLevelInfo = $("#quizLevelInfo").val();
		quizLevelInfo = quizLevelInfo.substring(0, quizLevelInfo.length - 1);
		levelSeries.push(quizLevelInfo.split(','));

		levelSeriesArray.push({
			shadow: false,
			color: "#F6FF00",
			label: 'Level Count for Quiz'
		});
		var levelMax = Math.max.apply(Math, quizLevelInfo.split(',')) + 1;

		var levelOptions = {
			seriesDefaults: {
				renderer: $.jqplot.BarRenderer,
				pointLabels: { show: true }
			},
			axes: {
				xaxis: {
					renderer: $.jqplot.CategoryAxisRenderer,
					ticks: levels
				},
				yaxis: {
					max: levelMax,
					tickInterval: 1
				}
			},
			grid: {
				shadow: false, borderWidth: 1.0, drawGridLines: true,
				background: "#FFF", borderColor: "#000",
				gridLineColor: '#cccccc'
			},
			title: {
				text: "Question Levels",
				textAlign: "left"
			},
			series: levelSeriesArray,
			legend: {
				show: true,
				placement: 'outsideGrid'
			}
		};

		//Finally, draw the graph.
		var levelChart = $.jqplot('levelChart', levelSeries, levelOptions);
	}

	function drawCategoriesGraph() {
		var s1 = [2, 6, 7, 10];
		var s2 = [7, 5, 3, 2];

		var catSeries = [];
		var names = [];

		var categories = $("#hfCategories").val().substring(0, $("#hfCategories").val().length - 1).split('|');
		
		var hiddenFields = $("input[type='hidden']");
		for (var i = 0; i < hiddenFields.length; i++) {
			if ($(hiddenFields[i]).attr('id').indexOf("attemptCategoryInfo") > -1) {
				var data = $(hiddenFields[i]).val();
				names.push(data.substring(0, data.indexOf('|')));
				var cats = data.substring(data.indexOf('|') + 1, data.length - 1);
				catSeries.push(cats.split(','));
			}
		}

		var catSeriesArray = [];
		for (var i = 0; i < catSeries.length; i++) {
			var color = (i % 2 == 0) ? "#CCC" : "#DC291E";
			try {
				catSeriesArray.push({
					color: color,
					shadow: false,
					label: names[i]
				});
			} catch (e) { }
		}

		var quizCategoryInfo = $("#quizCategoryInfo").val();
		quizCategoryInfo = quizCategoryInfo.substring(0, quizCategoryInfo.length - 1);
		catSeries.push(quizCategoryInfo.split(','));

		catSeriesArray.push({
			shadow: false,
			color: "#F6FF00",
			label: 'Category Count for Quiz'
		});
		var catMax = Math.max.apply(Math, quizCategoryInfo.split(',')) + 1;
		
		var categoryOptions = {
			seriesDefaults: {
				renderer: $.jqplot.BarRenderer,
				pointLabels: { show: true }
			},
			axes: {
				xaxis: {
					renderer: $.jqplot.CategoryAxisRenderer,
					ticks: categories
				},
				yaxis: {
					max: catMax,
					tickInterval: 1
				}
			},
			grid: {
				shadow: false, borderWidth: 1.0, drawGridLines: true,
				background: "#FFF", borderColor: "#000",
				gridLineColor: '#cccccc'
			},
			title: {
				text: "Question Categories",
				textAlign: "left"
			},
			series: catSeriesArray,
			legend: {
				show: true,
				placement: 'outsideGrid'
			}
		};

		var categoryChart = $.jqplot('categoryChart', catSeries, categoryOptions);
	}

	$(document).ready(function () {
		try {
			drawLevelsGraph();
			drawCategoriesGraph();
		} catch (e) {}

	});

</script>
</head>
<body style="margin:10px;">
<form runat="server">
<span class="pageTitle">Compare Applicants</span>
<br /><br />

<table cellpadding="0" cellspacing="0" border="0" runat="server" id="tblApplicantInfo">
	<tr></tr>
</table>
<br />
<br />

<div style="border-top: 2px solid #666">&nbsp;</div>

<table cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td>
			<div id="levelChart" style="margin-top:20px; margin-left:20px; width:500px; height:300px;"></div>
		</td>
		<td style="padding-left:20px;">
			<div id="categoryChart" style="margin-top:20px; margin-left:20px; width:500px; height:300px;"></div>
		</td>
	</tr>
</table>

<asp:Panel ID="pnlHiddenData" runat="server">
</asp:Panel>
</form>
</body>
</html>